<template>
  <div class="container top-0 position-sticky z-index-sticky">
    <div class="row">
      <div class="col-12">
        <top-navbar           
          isBlur="blur  border-radius-lg my-3 py-2 start-0 end-0 mx-4 shadow"
          v-bind:darkMode="true"
          isBtn="bg-gradient-success"/>
      </div>
    </div>
  </div>
  <main class="mt-0 main-content">
    <section>
      <div class="page-header min-vh-100">
        <div class="container">
          <div class="row">
            <div class="mx-auto col-xl-4 col-lg-5 col-md-7 d-flex flex-column mx-lg-0">
              <div class="card card-plain">
                <div class="pb-0 card-header text-start">
                  <h4 class="font-weight-bolder">Sign In</h4>
                  <p class="mb-0">Enter your email and password to sign in</p>
                </div>
                <div class="card-body">
                  <form  @submit="isSubmit($event)" role="form">
                    <div class="mb-3">
                    <argon-signup-input type="email" placeholder="Email" aria-label="Email" isRequired=true v-model="signin_form.email"/>
                    </div>
                    <div class="mb-3">
                    <argon-signup-input type="password" placeholder="Password" aria-label="Password" isRequired=true  v-model="signin_form.pwd"/>
                    {{pwdInfo}}
                    
                    </div>
                    <!-- <argon-switch id="rememberMe">Remember me</argon-switch> -->
                    <router-link class="text-primary text-gradient font-weight-bold" to="/forget">
                    Forget the password?
                    </router-link>
                    <div class="text-center">
                      <argon-signup-button
                        @click="signin"
                        class="mt-4"
                        variant="gradient"
                        color="success"
                        fullWidth
                        size="lg"
                      >Sign in</argon-signup-button>
                    </div>
                  </form>
                </div>
                <div class="px-1 pt-0 text-center card-footer px-lg-2">
                  <p class="mx-auto mb-4 text-sm">
                    Don't have an account?
                    <router-link class="text-success text-gradient font-weight-bold" to="/signup">
                    Sign up
                    </router-link>
                  </p>
                </div>
              </div>
            </div>
            <div
              class="top-0 my-auto text-center col-6 d-lg-flex d-none h-100 pe-0 position-absolute end-0 justify-content-center flex-column"
            >
              <div
                class="position-relative bg-gradient-primary h-100 m-3 px-7 border-radius-lg d-flex flex-column justify-content-center overflow-hidden"
                style="background-image: url('./img/gym.jpg');
              background-size: cover;"
              >
                <span class="mask bg-gradient-success opacity-6"></span>
                <h4
                  class="mt-5 text-white font-weight-bolder position-relative"
                >"Healthy body, healthy mind"</h4>
                <p
                  class="text-white position-relative"
                >Fitness is not a destination, it's a journey.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
</template>

<script>
import TopNavbar from "@/examples/PageLayout/TopNavbar.vue";
// import ArgonSwitch from "@/components/ArgonSwitch.vue";
import ArgonSignupInput from "@/components/ArgonSignupInput.vue";
import ArgonSignupButton from "@/components/ArgonSignupButton.vue";
import axios from "axios"
import router from "@/router/index.js"

const body = document.getElementsByTagName("body")[0];

export default {
  name: "signin",
  components: {
    TopNavbar,
    // ArgonSwitch,
    ArgonSignupInput,
    ArgonSignupButton,
  },
  data(){
    return{
      signin_form:{
        email:'',
        pwd:''
      },
      checkFlag:1,
      valueChangeFlag:-1,
      pwdVervifi:0,
      info:String,
      Flag:0,
      returnPwd:"000000000",
      //test
      test:0,
    }
  },
  watch:{
    
    //密码输入校验
    'signin_form.pwd'(newpwd){
      let len = newpwd.length
      if(len < 6){
        this.pwdInfo = "Password must have more than six characters!"
      }
      else{
        this.pwdInfo = ""
        this.pwdVervifi = 1
      }
    },
    
    immediate:true
  },
  methods: {
    //路由跳转
    change(){
      this.router.push({
        path:'/facility',
      })
    },
    isSubmit(e){
      if(this.Flag == 0){
        return e.preventDefault();
      }
    },
    signin_check(){
      let check = 0

      check += this.pwdVervifi

      if(check == 1){
        return true
      }
      else{
        return false
      }
    },
    signin(){
      let formData = new FormData()
      for(let key in this.signin_form){
        formData.append(key,this.signin_form[key])
      }
      if(this.signin_check){
        axios({
        method:'get',
        baseURL: 'https://fitzone.work:8080/login',
        params:{
            email:this.signin_form.email,
            pwd:this.signin_form.pwd
        }
      }).then(res => {
        console.log(res.data)
        if(res.data['email'] == this.signin_form.email){
            for(var key in res.data){
              sessionStorage.setItem(key, res.data[key]);
            }
            
            console.log(sessionStorage)
            if(res.data['identity'] == 0){
              sessionStorage.setItem("LOGINFLAG",0)
              router.push('/facility')
            }
            else if(res.data['identity'] == 1){
              sessionStorage.setItem("LOGINFLAG",1)
              router.push('/homepage')
            }else{
              alert("You're not employee or manager! Please login in APP!")
            }
        }else{
          alert('E-mail or password is wrong!')
        }
      }).catch(err => {
        console.log(err)
      })
      }
    },
    
  },
  created() {
    this.$store.state.hideConfigButton = true;
    this.$store.state.showNavbar = false;
    this.$store.state.showSidenav = false;
    this.$store.state.showFooter = false;
    body.classList.remove("bg-gray-100");
  },
  beforeUnmount() {
    this.$store.state.hideConfigButton = false;
    this.$store.state.showNavbar = true;
    this.$store.state.showSidenav = true;
    this.$store.state.showFooter = true;
    body.classList.add("bg-gray-100");
  },
};
</script>
<style>
  .signup{
  background-image:url('./../assets/img/login.jpg');
  }
</style>